<template>
	<zh-sheet :round="props.round" :color="props.color" :margin="props.margin" :transprent="props.transprent"
		:padding="[0, 0]">
		<slot name="title">
			<zh-sheet :round="props.round" v-if="props.title" :color="props.color" :margin="[0, 0]" :padding="[30, 0]">
				<view class="flex flex-row flex-row-center-start mt-20 pb-20 border-b-1" >
					<tm-icon v-if="props.icon" :name="props.icon" :font-size="props.fontSize" :color="props.titleColor" ></tm-icon>
					<zh-text :font-size="props.fontSize" :color="props.titleColor" _class="text-weight-b" :label="props.title"></zh-text>
				</view>
			</zh-sheet>
		</slot>
		<zh-sheet :round="props.round" :width="props.width" :transprent="true" :color="props.color" :margin="[0, 0]"
			:padding="[0, 20]" _class="flex flex-row flex-row-top-start" contStyle="flex-wrap:wrap;">
			<slot></slot>
		</zh-sheet>
	</zh-sheet>
</template>
<script lang="ts" setup>
	/**
 * 宫格
 * @description 注意，它内部只能放置zh-grid-item，且不能嵌套zh-grid
 * @slot 默认插槽 放置zh-grid-item
 */
	import { PropType, computed, provide, ref, Ref, inject } from 'vue';
	import { custom_props } from '@/tool/lib/minxs';
	const props = defineProps({
		...custom_props,
		round: {
			type: Number,
			default: 2,
		},
		width: {
			type: Number,
			default: 750,
		},
		margin: {
			type: Array as PropType<Array<number>>,
			default: () => [0, 0],
		},
		padding: {
			type: Array as PropType<Array<number>>,
			default: () => [0, 0],
		},
		//一行放置几个。
		col: {
			type: Number,
			default: 5,
		},
		//是否显示边线。
		showBorder: {
			type: Boolean,
			default: false,
		},
		// 背景
		color: {
			type: String,
			default: 'white',
		},
		//是否透明背景
		transprent: {
			type: Boolean,
			default: false,
		},
		icon: {
			type: String,
			default: '',
		},
		// 标题
		title: {
			type: String,
			default: '',
		},
		// 标题
		titleColor: {
			type: String,
			default: 'primary',
		},
		fontSize: {
			type: Number,
			default: 36,
		},
	});
	interface arrayid {
		id : string | number;
		type : string | number;
	}
	let _cachList : Ref<Array<arrayid>> = ref([]);
	const _colWidth = computed(() => Math.ceil((props.width - 2 * props.margin[0]) / props.col - 1));
	provide('zhGridItemWidth', _colWidth.value + (props.showBorder ? 1 : 0));
	provide(
		'zhGridshowBorder',
		computed(() => props.showBorder)
	);
	provide(
		'zhGridshowCachList',
		computed(() => _cachList.value)
	);
	provide(
		'zhGridCol',
		computed(() => props.col)
	);
	function pushKey(e : arrayid) {
		let index = _cachList.value.findIndex((el) => el.id == e.id);
		if (index == -1) {
			_cachList.value.push(e);
		} else {
			_cachList.value.splice(index, 1, e);
		}

		setIndexType();
	}

	function delKey(e : arrayid) {
		let index = _cachList.value.findIndex((el) => el.id == e.id);
		setIndexType();
	}

	function setIndexType() {
		// type
		/**
		 * 1,all,
		 * 2,bottom,right
		 * 3,left,bottom,right
		 * 4,top,left,bottom
		 */
		let totallen = _cachList.value.length;
		_cachList.value = _cachList.value.map((el, index) => {
			let aIndex = index + 1;
			if (aIndex <= props.col) {
				el.type = 4;
				if ((aIndex == totallen && totallen == 1) || aIndex == 1) {
					el.type = 1;
				}
			} else {
				if (aIndex % props.col == 1) {
					el.type = 3;
				} else {
					el.type = 2;
				}
			}
			return el;
		});
	}
	defineExpose({
		pushKey,
		delKey,
		keyName: 'zhGrid',
	});
</script>